/**
 * @description: 
 * @file: mixins.scss
 * @author: Evan
 * @date: 2025.04.09 11:50:22
 * @week: 周三
 * @version: V
* */

@use 'sass:color';
@use 'sass:list';

// dark
@mixin dark($block) {
  html.dark {
    @include b($block) {
      @content;
    }
  }
}

// 绝对居中
@mixin center {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  @content;
}

// 平板
@mixin ipad {
  @media screen and (max-width: 768px) {
    @content;
  }
}

$colors: #67c23a, #f56c6c, #e6a23c, #b83b5e, #f08a5d, #95e1d3, #521262, #f73859, #edb1f1, #8c82fc,
  #155263;

// 操作按钮
@mixin scene-operation($el: '.scene-operation') {
  #{ $el } {
    width: 100%;
    bottom: 30px;
    z-index: 1;
    position: absolute;
    text-align: center;
    pointer-events: none;
    .btn {
      margin: 0 3px;
      cursor: pointer;
      display: inline-block;
      position: relative;
      font-size: 14px;
      user-select: none;
      pointer-events: all;
      vertical-align: middle;
      &::after {
        top: 100%;
        left: 0;
        width: 100%;
        content: '';
        display: none;
        position: absolute;
        border-bottom: 1px solid transparent;
      }
      @each $c in $colors {
        $i: list.index(
          $list: $colors,
          $value: $c
        );
        &:nth-child(#{ $i }) {
          color: $c;
          &:hover {
            color: color.adjust($color: $c, $lightness: 20%);
            &::after {
              display: block;
              border-color: $c;
            }
          }
        }
      }
    }

    $color: #27ffb0;
    .item {
      color: $color;
      border: 1px solid #{$color};
      cursor: pointer;
      margin: 5px;
      padding: 10px 10px;
      display: inline-flex;
      font-size: 16px;
      white-space: nowrap;
      align-items: center;
      border-radius: 20px;
      pointer-events: all;
      justify-content: center;
      backdrop-filter: saturate(50%) blur(2px);
      background-color: rgba($color: $color, $alpha: 0.1);

      &:hover {
        background-color: rgba($color: $color, $alpha: 0.3);
      }
    }
    @content;
  }
}

$dotColor: #596a78;
$dotPointColor: #60ffac;

// 2d-label
@mixin dot-label($el: '.three-scene__dot-wrap') {
  #{ $el } {
    --dot-border-color: #848d92;
    --dot-bg-color: #{$dotColor};
    --dot-point-bg-color: #{$dotPointColor};
    font-size: max(14px, 1em);
    .dot-2D-label {
      --px-1: max(1px, 0.08em);
      --px-30: max(30px, 2.14em);
      color: #fff;
      width: 0.3em;
      height: 0.3em;
      cursor: pointer;
      z-index: 2;
      position: absolute;
      font-size: 1em;
      border-radius: 50%;
      background-color: var(--dot-point-bg-color);
      box-shadow: 0 0 0.4em 0.4em rgba($color: $dotPointColor, $alpha: 0.75);
      .bg {
        left: 50%;
        width: 1px;
        height: var(--px-30);
        bottom: 0.3em;
        position: absolute;
        background-color: var(--dot-bg-color);
        transform: translateX(-50%);
      }
      .inner {
        left: 50%;
        bottom: var(--px-30);
        border: var(--px-1) solid var(--dot-border-color);
        padding: 0 0.8em;
        position: absolute;
        min-width: 4em;
        transform: translateX(-50%);
        text-align: center;
        white-space: nowrap;
        line-height: 2;
        border-radius: 2em;
        backdrop-filter: saturate(50%) blur(2px);
        background-color: rgba($color: $dotColor, $alpha: 0.2);
      }
    }
    @content;
  }
}
